<!DOCTYPE html>



<HTML>
<HEAD>
    <TITLE> ZTREE DEMO </TITLE>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <link rel="stylesheet" href="plugins/ztree/css/zTreeStyle/zTreeStyle.css">
    <script src="plugins/ztree/js/jquery-1.4.4.min.js"></script>
    <script src="plugins/ztree/js/jquery.ztree.all-3.5.js"></script>


    <SCRIPT LANGUAGE="JavaScript">
        var zTreeObj;   // 树形对象
        // zTree 的参数配置，深入使用请参考 API 文档（setting 配置详解）
        var setting = {  // 设置
            data: {
                simpleData: {  // 开启了简单json数据结构
                    enable: true,
                    idKey: "id",
                    pIdKey: "pId",
                    rootPId: 0
                }
            },
            check: {    //开启了复选框
                enable: true

            }
        };
        // zTree 的数据属性，深入使用请参考 API 文档（zTreeNode 节点数据详解）
       /* var zNodes = [    // 树上的节点   标准的json数据结构
            {name:"test1", children:[
                    {name:"test1_1" ,children:[{name:"test1_1_1"},{name:"test1_1_2"},{name:"test1_1_3"}]}, {name:"test1_2"}]},
            {name:"test2", children:[
                    {name:"test2_1"}, {name:"test2_2"}]}
        ];*/

        var zNodes = [    // 树上的节点   简单的json数据结构
            {id:1,name:"test1",pId:0},
            {id:2,name:"test2",pId:0},
            {id:11,name:"test11",pId:1},
            {id:12,name:"test12",checked:"true",pId:1},
            {id:111,name:"test111",pId:11},
            {id:112,name:"test112",pId:11},
            {id:113,name:"test113",pId:11},
            {id:21,name:"test21",pId:2},
            {id:22,name:"test22",pId:2},
        ];

        $(document).ready(function(){
            zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, zNodes);
            zTreeObj.expandAll(true); //展开所有节点
        });


        function save() {    //"1,32,3,5,6"
            let ids = "";
            var nodes = zTreeObj.getCheckedNodes(true);
            for (let i = 0; i < nodes.length; i++) {
                let id = nodes[i].id;
                if(i== nodes.length-1){  //最后一个数
                    ids+=id;
                }else{
                    ids+=id+",";
                }
            }
            alert(ids);
        }
    </SCRIPT>
</HEAD>
<BODY>
<div>
    <button onclick="save()">保存</button>
    <ul id="treeDemo" class="ztree"></ul>
</div>
</BODY>
</HTML>